<template>
    <a-drawer
            title="代码调试"
            :visible.sync="visible"
            placement="bottom"
            :closable="true"
            height="100%"
            @close="handleCancel">
        <div>
            <div style="display: flex;align-items: center">
                <div style="width: 5px;height: 20px;background-color: #1890FF"/>
                <div style="font-size: 20px;font-weight: bold;margin-left:5px">选择映射配置</div>
            </div>
            <a-form :form="form" layout="inline" style="margin:10px 0;">
                <a-form-item label="选择数据源配置" >
                    <a-select style="width:300px"
                            v-decorator="['columnConfigGroupId',{ rules: [{ required: true, message: '请选择!' }] },]">
                        <a-select-option v-for="item in columnConfigGroupList" :key="item.id"  :value="item.id">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item label="选择模板宏">
                    <a-select style="width:300px"
                            v-decorator="['globalConfigGroupId',{ rules: [] }]">
                        <a-select-option v-for="item in globalConfigGroupList" :key="item.id"  :value="item.id">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item>
                        <a-button :angle="0" @click="cancel">取消</a-button>
                        <a-button style="margin-left: 20px" type="primary" :angle="0" @click="submit">确认</a-button>
                </a-form-item>

            </a-form>

            <a-divider/>

            <div style="height: 100%">
                <codemirror
                            v-show="codeMirrorVisible"
                            ref="myCodeMirror"
                            :value="debugResult"
                            :options="options"
                            @change="fnCodeChange"
                            class="code">
                </codemirror>
            </div>

        </div>
    </a-drawer>
</template>

<script>
import { codemirror } from 'vue-codemirror-lite'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/cobalt.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/vue/vue.js'
import 'codemirror/mode/velocity/velocity.js'

import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'

import 'codemirror/mode/css/css.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/markdown/markdown.js'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/r/r.js'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/swift/swift.js'

export default {
  name: "DebugModal",
  components: {
    codemirror
  },
  data() {
    return {
      visible: false,
      code: '',
      form: this.$form.createForm(this, { name: 'debug' }),
      columnConfigGroupList: [],
      globalConfigGroupList: [],
      debugResult: '',
      codeMirrorVisible: false,
      // 配置
      options: {
        // 缩进格式
        tabSize: 2,
        // 主题，对应主题库 JS 需要提前引入
        theme: 'cobalt',
        // 显示行号
        lineNumbers: true,
        line: true,
        mode: 'velocity',
        extraKeys: {
          'Ctrl-/': 'autocomplete'
        }
      }
    }
  },
  methods: {
    handleCancel() {
      this.code = ''
      this.visible = false
    },
    cancel() {
      this.code = ''
      this.visible = false
    },
    submit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let _data = { code: this.code }
          Object.assign(_data, values)
          this.Atm.postAction('codeGenerate/debug', _data, 1)
            .then(res => {
              if (res.code == 0) {
                this.debugResult = res.result
                this.codeMirrorVisible = true
              } else {
                this.$message.error(res.message)
              }
            })
        }
      })
    },
    fnCodeChange() {
      //do nothing
    }
  },
  watch: {
    'visible': function (val) {
      if (val) {
        //加载类型映射,
        this.Atm.getAction('codeGenerator/generatorColumnConfigGroup/list')
          .then(res => {
            if (res.code == 0) {
              this.columnConfigGroupList = res.result.records
            } else {
              this.$message.info(res.message)
            }
          })

        //加载模板宏资源
        this.Atm.getAction('codeGenerator/generatorGlobalConfigGroup/list')
          .then(res => {
            if (res.code == 0) {
              this.globalConfigGroupList = res.result.records
            } else {
              this.$message.info(res.message)
            }
          })
      }
    }
  }
}
</script>

<style scoped>

</style>
